<template>
  <div class="film">
    <film-header></film-header>
    <div class="text">
      <router-link to="/film/city">
      北京
      <i class="fa fa-caret-down"></i>
      </router-link>
      <router-link to="/film/well-receiving">正在热映</router-link>
      <router-link to="/film/coming-soon">即将上映</router-link>
      <router-link to="/film/search">
        <i class="fa fa-search"></i>
      </router-link>
    </div> 
    <div class="textBody">
      <router-view></router-view>
    </div>
    <film-footer></film-footer>
  </div>
</template>

<script>
import FilmHeader from '../components/filmHeader.vue'
import FilmFooter from '../components/filmFooter.vue'
export default {
    name:'my-film',
  components: {
    FilmHeader,FilmFooter
  }
}
</script>
<style scoped>
  .film .text{
    margin-top:50px;
    width:100%;
    height:50px;
    line-height:50px;
    display: flex;
    justify-content:space-around;
  }
  .film .text a{
    color:black;
    font-weight:bold;

  }
  .film .text .router-link-active{
    color:#e54847;
    border-bottom:3px solid #e54847;
  }
</style>